<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <!-- bootstrap4 -->
    <link rel="stylesheet" href="css/release/bootstrap.min.css">
    <link rel="stylesheet" href="css/release/screen-dist.css">
    <title>五十音图</title>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col">
                <div class="row">
                    <div class="col jiaming-title">平假名</div>
                </div>
                <div class="row row-cols-5">
                    <!-- 第一行 -->
                    <div class="col jiaming" id="a" data-toggle="tooltip" title="a">あ</div>
                    <div class="col jiaming" id="i" data-toggle="tooltip" title="i">い</div>
                    <div class="col jiaming" id="u" data-toggle="tooltip" title="u">う</div>
                    <div class="col jiaming" id="e" data-toggle="tooltip" title="e">え</div>
                    <div class="col jiaming" id="o" data-toggle="tooltip" title="o">お</div>
                    <!-- 第二行 -->
                    <div class="col jiaming" id="ka" data-toggle="tooltip" title="ka">か</div>
                    <div class="col jiaming" id="ki" data-toggle="tooltip" title="ki">き</div>
                    <div class="col jiaming" id="ku" data-toggle="tooltip" title="ku">く</div>
                    <div class="col jiaming" id="ke" data-toggle="tooltip" title="ke">け</div>
                    <div class="col jiaming" id="ko" data-toggle="tooltip" title="ko">こ</div>
                    <!-- 第三行 -->
                    <div class="col jiaming" id="sa" data-toggle="tooltip" title="sa">さ</div>
                    <div class="col jiaming" id="si" data-toggle="tooltip" title="si">し</div>
                    <div class="col jiaming" id="su" data-toggle="tooltip" title="su">す</div>
                    <div class="col jiaming" id="se" data-toggle="tooltip" title="se">せ</div>
                    <div class="col jiaming" id="so" data-toggle="tooltip" title="so">そ</div>
                    <!-- 第四行 -->
                    <div class="col jiaming" id="ta" data-toggle="tooltip" title="ta">た</div>
                    <div class="col jiaming" id="ti" data-toggle="tooltip" title="ti">ち</div>
                    <div class="col jiaming" id="tu" data-toggle="tooltip" title="tu">つ</div>
                    <div class="col jiaming" id="te" data-toggle="tooltip" title="te">て</div>
                    <div class="col jiaming" id="to" data-toggle="tooltip" title="to">と</div>
                    <!-- 第五行 -->
                    <div class="col jiaming" id="na" data-toggle="tooltip" title="na">な</div>
                    <div class="col jiaming" id="ni" data-toggle="tooltip" title="ni">に</div>
                    <div class="col jiaming" id="nu" data-toggle="tooltip" title="nu">ぬ</div>
                    <div class="col jiaming" id="ne" data-toggle="tooltip" title="ne">ね</div>
                    <div class="col jiaming" id="no" data-toggle="tooltip" title="no">の</div>
                    <!-- 第六行 -->
                    <div class="col jiaming" id="ha" data-toggle="tooltip" title="ha">は</div>
                    <div class="col jiaming" id="hi" data-toggle="tooltip" title="hi">ひ</div>
                    <div class="col jiaming" id="hu" data-toggle="tooltip" title="hu">ふ</div>
                    <div class="col jiaming" id="he" data-toggle="tooltip" title="he">へ</div>
                    <div class="col jiaming" id="ho" data-toggle="tooltip" title="ho">ほ</div>
                    <!-- 第七行 -->
                    <div class="col jiaming" id="ma" data-toggle="tooltip" title="ma">ま</div>
                    <div class="col jiaming" id="mi" data-toggle="tooltip" title="mi">み</div>
                    <div class="col jiaming" id="mu" data-toggle="tooltip" title="mu">む</div>
                    <div class="col jiaming" id="me" data-toggle="tooltip" title="me">め</div>
                    <div class="col jiaming" id="mo" data-toggle="tooltip" title="mo">も</div>
                    <!-- 第八行 -->
                    <div class="col jiaming" id="ya" data-toggle="tooltip" title="ya">や</div>
                    <div class="col jiaming jiaming-light">い</div>
                    <div class="col jiaming" id="yu" data-toggle="tooltip" title="yu">ゆ</div>
                    <div class="col jiaming jiaming-light">え</div>
                    <div class="col jiaming" id="yo" data-toggle="tooltip" title="yo">よ</div>
                    <!-- 第九行 -->
                    <div class="col jiaming" id="ra" data-toggle="tooltip" title="ra">ら</div>
                    <div class="col jiaming" id="ri" data-toggle="tooltip" title="ri">り</div>
                    <div class="col jiaming" id="ru" data-toggle="tooltip" title="ru">る</div>
                    <div class="col jiaming" id="re" data-toggle="tooltip" title="re">れ</div>
                    <div class="col jiaming" id="ro" data-toggle="tooltip" title="ro">ろ</div>
                    <!-- 第十行 -->
                    <div class="col jiaming" id="wa" data-toggle="tooltip" title="wa">わ</div>
                    <div class="col jiaming jiaming-light">い</div>
                    <div class="col jiaming jiaming-light">う</div>
                    <div class="col jiaming jiaming-light">え</div>
                    <div class="col jiaming" id="wo" data-toggle="tooltip" title="wo">を</div>
                    <!-- 第十一行 -->
                    <div class="col jiaming" id="n" data-toggle="tooltip" title="n">ん</div>
                </div>
            </div>
            <div class="col-1"></div>
            <div class="col">
                <div class="row">
                    <div class="col jiaming-title">片假名</div>
                </div>
                <div class="row row-cols-5">
                    <!-- 第一行 -->
                    <div class="col jiaming" id="a2" data-toggle="tooltip" title="a">ア</div>
                    <div class="col jiaming" id="i2" data-toggle="tooltip" title="i">イ</div>
                    <div class="col jiaming" id="u2" data-toggle="tooltip" title="u">ウ</div>
                    <div class="col jiaming" id="e2" data-toggle="tooltip" title="e">エ</div>
                    <div class="col jiaming" id="o2" data-toggle="tooltip" title="o">オ</div>
                    <!-- 第二行 -->
                    <div class="col jiaming" id="ka2" data-toggle="tooltip" title="ka">カ</div>
                    <div class="col jiaming" id="ki2" data-toggle="tooltip" title="ki">キ</div>
                    <div class="col jiaming" id="ku2" data-toggle="tooltip" title="ku">ク</div>
                    <div class="col jiaming" id="ke2" data-toggle="tooltip" title="ke">ケ</div>
                    <div class="col jiaming" id="ko2" data-toggle="tooltip" title="ko">コ</div>
                    <!-- 第三行 -->
                    <div class="col jiaming" id="sa2" data-toggle="tooltip" title="sa">サ</div>
                    <div class="col jiaming" id="si2" data-toggle="tooltip" title="si">シ</div>
                    <div class="col jiaming" id="su2" data-toggle="tooltip" title="su">ス</div>
                    <div class="col jiaming" id="se2" data-toggle="tooltip" title="se">セ</div>
                    <div class="col jiaming" id="so2" data-toggle="tooltip" title="so">ソ</div>
                    <!-- 第四行 -->
                    <div class="col jiaming" id="ta2" data-toggle="tooltip" title="ta">タ</div>
                    <div class="col jiaming" id="ti2" data-toggle="tooltip" title="ti">チ</div>
                    <div class="col jiaming" id="tu2" data-toggle="tooltip" title="tu">ツ</div>
                    <div class="col jiaming" id="te2" data-toggle="tooltip" title="te">テ</div>
                    <div class="col jiaming" id="to2" data-toggle="tooltip" title="to">ト</div>
                    <!-- 第五行 -->
                    <div class="col jiaming" id="na2" data-toggle="tooltip" title="na">ナ</div>
                    <div class="col jiaming" id="ni2" data-toggle="tooltip" title="ni">ニ</div>
                    <div class="col jiaming" id="nu2" data-toggle="tooltip" title="nu">ヌ</div>
                    <div class="col jiaming" id="ne2" data-toggle="tooltip" title="ne">ネ</div>
                    <div class="col jiaming" id="no2" data-toggle="tooltip" title="no">ノ</div>
                    <!-- 第六行 -->
                    <div class="col jiaming" id="ha2" data-toggle="tooltip" title="ha">ハ</div>
                    <div class="col jiaming" id="hi2" data-toggle="tooltip" title="hi">ヒ</div>
                    <div class="col jiaming" id="hu2" data-toggle="tooltip" title="hu">フ</div>
                    <div class="col jiaming" id="he2" data-toggle="tooltip" title="he">ヘ</div>
                    <div class="col jiaming" id="ho2" data-toggle="tooltip" title="ho">ホ</div>
                    <!-- 第七行 -->
                    <div class="col jiaming" id="ma2" data-toggle="tooltip" title="ma">マ</div>
                    <div class="col jiaming" id="mi2" data-toggle="tooltip" title="mi">ミ</div>
                    <div class="col jiaming" id="mu2" data-toggle="tooltip" title="mu">ム</div>
                    <div class="col jiaming" id="me2" data-toggle="tooltip" title="me">メ</div>
                    <div class="col jiaming" id="mo2" data-toggle="tooltip" title="mo">モ</div>
                    <!-- 第八行 -->
                    <div class="col jiaming" id="ya2" data-toggle="tooltip" title="ya">ヤ</div>
                    <div class="col jiaming jiaming-light">イ</div>
                    <div class="col jiaming" id="yu2" data-toggle="tooltip" title="yu">ユ</div>
                    <div class="col jiaming jiaming-light">エ</div>
                    <div class="col jiaming" id="yo2" data-toggle="tooltip" title="yo">ヨ</div>
                    <!-- 第九行 -->
                    <div class="col jiaming" id="ra2" data-toggle="tooltip" title="ra">ラ</div>
                    <div class="col jiaming" id="ri2" data-toggle="tooltip" title="ri">リ</div>
                    <div class="col jiaming" id="ru2" data-toggle="tooltip" title="ru">ル</div>
                    <div class="col jiaming" id="re2" data-toggle="tooltip" title="re">レ</div>
                    <div class="col jiaming" id="ro2" data-toggle="tooltip" title="ro">ロ</div>
                    <!-- 第十行 -->
                    <div class="col jiaming" id="wa2" data-toggle="tooltip" title="wa">ワ</div>
                    <div class="col jiaming jiaming-light">イ</div>
                    <div class="col jiaming jiaming-light">ウ</div>
                    <div class="col jiaming jiaming-light">エ</div>
                    <div class="col jiaming" id="wo2" data-toggle="tooltip" title="wo">ヲ</div>
                    <!-- 第十一行 -->
                    <div class="col jiaming" id="n2" data-toggle="tooltip" title="n">ン</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 浮动菜单 -->
    <div class="float-menu">
        <div class="float-button" id="zhuoyin">浊音</div>
        <div class="float-button" id="aoyin">拗音</div>
    </div>
    <!--Aplayer-->
    <div id="aplayer" style="display: none;"></div>
    <!-- jq, popper, bootstrap -->
    <script src="js/release/jquery.slim.min.js"></script>
    <script src="js/release/popper.min.js"></script>
    <script src="js/release/bootstrap.min.js"></script>
    <!--Aplayer-->
    <script src="js/release/APlayer.min.js"></script>
    <!--Aplayer配置-->
    <script src="js/aplayerConfig.js"></script>
    <!--实现点击播放-->
    <script src="js/release/play-dist.js"></script>
    <!-- 浮动菜单链接 -->
    <script src="js/release/openlink-dist.js"></script>
    <!-- 启用Tooltip -->
    <script>
        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })
    </script>
</body>

</html>